---
import '@styles/global.css';

const {
  title = null,
  titleSize = "text-xl",
  class: customClass = ""
} = Astro.props;
---

<div class={`p-6 bg-white border border-dashed border-gray-3 ${customClass}`}>
  <div class="flex flex-col gap-4">
    {title && (
      <p class={`font-sans ${titleSize} text-dark-blue-1 font-medium m-0`}>
        {title}
      </p>
    )}
    <slot />
  </div>
</div>
